.user_page {
  background: #F5E7CA;
}
.user_page_top {
  width: 100%; height: rem(738); position: relative;
  background: url($imgPath + '/member/user_page_top_bg.png') no-repeat top center;
  background-size: 100% 100%;
  h3 {
    font-size: rem(34); color: #fff; display: flex; align-items: center;
    padding-top: rem(35); justify-content: center;
    img {
      width: rem(72); height: rem(72); display: inline-block; padding: 0 rem(15);
    }
  }
  .user_right {
    text-align: center; padding-top: rem(100);
    img { width: rem(560); height: rem(330); }
  }
  .user_page_info {
    display: flex; justify-content: center; align-items: center;
    position: absolute; bottom: rem(35); width: 100%;
    img { width: rem(32); height: rem(32); display: inline-block; padding-right: rem(5);}
    p {
      font-size: rem(24); color: #333333;
      span { color: #E93323; }
    }
  }
}
.user_vip_welfare {
  text-align: center;
  background:#F5E7CA;
  .user_btn {
    text-align: center;
    p {
       width: rem(690); height: rem(90); border-radius: rem(10); display: inline-block;
       background:linear-gradient(90deg,rgba(52,41,22,1) 0%,rgba(71,59,34,1) 99%);
       font-size: rem(36); color: #F3E5CA; line-height: rem(90);
    }
   }
   .user_product {
     width: rem(710); height: rem(964); display: inline-block; margin: rem(20) 0 rem(100) 0;
     background: url($imgPath + '/member/user_page_prd_bg.png') no-repeat top center;
     background-size: 100% 100%; position: relative;
     .user_product_title {
       padding-top: rem(240);
       p {
         font-size: rem(26); padding-bottom: rem(10);
         &:nth-child(1) { color: #603B1E;}
         &:nth-child(2) { color: #17273A;}
       }
     }
     .user_product_content {
       margin: rem(20) rem(30); text-align: left;
       white-space:nowrap; width: auto;
       overflow-x: scroll; overflow-y: hidden;
       -webkit-overflow-scrolling: touch; //有回弹效果
      display: flex; align-items: center;
       &::-webkit-scrollbar { width: 0; height: 0; display: none; }
       .user_product_card {
         width: rem(384); height: rem(550); background: #fff; border-radius: rem(8); display: inline-block;
         margin-right: rem(20); box-shadow:3px 4px 10px 0px rgba(77,77,77,0.13);
         .user_product_details {
           padding: rem(55) rem(33) rem(20) rem(33); width: rem(318);
           position: relative; text-align: center;
           .user_page_market {
             font-size: rem(20); color: #020202; padding: rem(8) rem(9);
             background: url($imgPath + '/member/user_page_markert.png') no-repeat top center;
             background-size: 100% 100%; position: absolute; top: rem(-2); left: rem(-1); width: rem(271);
           }
           img { width: rem(280); height: rem(280); padding-top: rem(10);}
           h3 { font-size: rem(28); color: #17273A; margin-top: rem(10); text-align: left;
             overflow: hidden; text-overflow:ellipsis; height: rem(80); line-height: rem(40);
              -webkit-line-clamp: 2; word-break: break-all; display: -webkit-box;
              -webkit-box-orient: vertical;
             white-space: pre-wrap; word-wrap: break-word; word-break: normal;
           }
           p { font-size: rem(20); color: #999; padding-top: rem(8); text-align: left;
             overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
              span { color: #E91F3F; font-size: rem(30);}
            }
            .product_unit_price {
              font-size: rem(20); color: #999; padding-top: rem(8);
                overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
                 span { color: #E91F3F; font-size: rem(30); font-weight:bold;}
             }
         }
         .more {
            width: rem(248); height: rem(470);
            display: flex; justify-content: center; align-items: center;
            p {
              text-align: left; margin-top: rem(10);
              font-size: rem(24); color: #CEB57E; display: inline-block;
              padding: rem(16) rem(28); border: 1px solid #CEB57E; border-radius: rem(30);
            }
          }
       }
       .limit_product_card {
         position: relative;
         background:linear-gradient(90deg,rgba(52,41,22,1) 0%,rgba(71,59,34,1) 99%);
         .user_product_details {
           .user_page_market {
             background: url($imgPath + '/member/user_page_limit_markert.png') no-repeat top center;
             background-size: 100% 100%; color: #FFFFFF;
           }
           h3 { color: #F3E5CA; }
           p { color: #E2CB9F; width: rem(250);}
           .product_unit_price {
              text-align: left; margin-top: rem(5);
              span { color: #333333; display: inline-block; padding: rem(4) rem(15); border-radius: rem(20);
              background:linear-gradient(-90deg,rgba(221,195,146,1) 0%,rgba(245,231,202,1) 99%);  text-align: left;}
           }
         }
         .limit_tips {
           width: rem(80); height: rem(76); position: absolute; right: rem(3); top: 0;
           background: url($imgPath + '/member/limit.png') no-repeat top center;
           background-size: 100% 100%;
         }
         .limit_leaf {
           width: rem(100); height: rem(120); position: absolute; right: 0; bottom: 0;
           background: url($imgPath + '/member/leaf.png') no-repeat top center;
           background-size: 100% 100%;
         }
       }
     }
     .balloon_1 {
       width: rem(120); height: rem(267);
       background: url($imgPath + '/member/balloon_1.png') no-repeat top center;
       background-size: 100% 100%; position: absolute; top: rem(140); left: 0;
     }
     .balloon_2 {
       width: rem(225); height: rem(276);
       background: url($imgPath + '/member/balloon_2.png') no-repeat top center;
       background-size: 100% 100%; position: absolute; top: rem(60); right: rem(-20);
     }
     .balloon_3 {
       width: rem(150); height: rem(180);
       background: url($imgPath + '/member/balloon_3.png') no-repeat top center;
       background-size: 100% 100%; position: absolute; bottom: rem(-40); left: rem(-20);
     }
   }
}
.vip_eight_equity {
  position: relative; padding: 0 rem(22); top: rem(-20); background: #F5E7CA;
  .vip_eight_title {
    text-align: center; height: rem(100); display: flex; align-items: center; justify-content: center;
    background:linear-gradient(180deg,rgba(255, 245, 227,1) 0%,rgba(255,246,227,1) 99%);
    border-radius: rem(12) rem(12) 0 0;
    p {
      color: #333333; font-size: rem(36); font-weight:500;
      span { font-size: rem(48); }
      &:before {
        content: ""; width: rem(130); height: rem(12); display: inline-block; margin-right: rem(20);
        background:linear-gradient(2400deg,rgba(221,195,146,1) 0%,rgba(255,246,227,1) 99%);
        position: relative; top: rem(-4);
      }
      &:after {
        content: ""; width: rem(130); height: rem(12); display: inline-block; margin-left: rem(20);
        background:linear-gradient(90deg,rgba(221,195,146,1) 0%,rgba(255,246,227,1) 99%);
        position: relative; top: rem(-4);
      }
    }
  }
  .vip_eight_card {
    margin-bottom: rem(20);
    background:linear-gradient(360deg,rgba(221,195,146,1) 0%,rgba(255,246,227,1) 99%);
    padding: rem(50) rem(30) rem(30) rem(30);
    .vip_eight_card_top {
      display: flex; justify-content: space-between; align-items: center;
      .title {
        position: relative;
        h3 {
          font-size: rem(36); color: #1A1A10; position: relative; z-index: 99;
        }
        em {
          width: rem(150); height: rem(10); content: "";
          display: inline-block; background: #E3CEA6; z-index: 1;
          position: absolute; left: 0; bottom: rem(3); border-radius: rem(10);
        }
      }
      p { font-size: rem(24); color: #2A2315; font-family: sans-serif;}
    }
    .subtitle {
      font-size: rem(24); color: #5C4D33; padding-top: rem(20);
    }
    .vip_eight_content {
      width: rem(645); height: rem(300); margin-top: rem(30);
      background: url($imgPath + '/member/vip_eight_one.png') no-repeat top center;
      background-size: 100% 100%;
      .vip_eight_word {
        padding: rem(70) rem(50);
        h3 { font-size: rem(33); color: #CFB57E; padding-top: rem(20);}
        p { font-size: rem(25); color: #D3C3A5; padding-top: rem(10);
          span { font-size: rem(42); color: #EADAB9;}
        }
      }
    }
    &:nth-child(2) {
      .vip_eight_content {
        background: url($imgPath + '/member/vip_eight_two.png') no-repeat top center;
        background-size: 100% 100%;
      }
      .vip_eight_word {
        h3 { font-size: rem(33); color: #2A2315; padding-top: rem(20);}
        p { font-size: rem(25); color: #2A2315; padding-top: rem(10);
          span { font-size: rem(42); color: #2A2315;}
        }
      }
    }
    &:nth-child(3) {
      .vip_eight_card_top {
        .title {
          em {
            width: rem(180);
          }
        }
      }
      .vip_eight_content {
        background: url($imgPath + '/member/vip_eight_three.png') no-repeat top center;
        background-size: 100% 100%;
      }
      .vip_eight_word {
        h3 { font-size: rem(33); color: #CFB57E; padding-top: rem(20);}
        p { font-size: rem(25); color: #D3C3A5; padding-top: rem(30);
          span { font-size: rem(42); color: #2A2315;}
        }
      }
    }
    &:nth-child(4) {
      .vip_eight_content {
        background: url($imgPath + '/member/vip_eight_four.png') no-repeat top center;
        background-size: 100% 100%;
      }
      .vip_eight_word {
        h3 { font-size: rem(33); color: #CFB57E; padding-top: rem(20);}
        p { font-size: rem(25); color: #D3C3A5; padding-top: rem(30);
          span { font-size: rem(42); color: #2A2315;}
        }
      }
    }
    &:nth-child(5) {
      .vip_eight_content {
        background: url($imgPath + '/member/vip_eight_five.png') no-repeat top center;
        background-size: 100% 100%;
      }
      .vip_eight_word {
        h3 { font-size: rem(33); color: #2A2315; padding-top: rem(20);}
        p { font-size: rem(25); color: #2A2315; padding-top: rem(30);
          span { font-size: rem(42); color: #2A2315;}
        }
      }
    }
    &:nth-child(6) {
      .vip_eight_content {
        background: url($imgPath + '/member/vip_eight_six.png') no-repeat top center;
        background-size: 100% 100%;
      }
      .vip_eight_word {
        padding-left: rem(130);
        h3 { font-size: rem(33); color: #CFB57E; padding-top: rem(20);}
        p { font-size: rem(25); color: #D3C3A5; padding-top: rem(30);
          span { font-size: rem(42); color: #2A2315;}
        }
      }
    }
    &:nth-child(7) {
      .vip_eight_content {
        background: url($imgPath + '/member/vip_eight_senve.png') no-repeat top center;
        background-size: 100% 100%;
      }
      .vip_eight_word {
        h3 { font-size: rem(33); color: #CFB57E; padding-top: rem(20);}
        p { font-size: rem(25); color: #D3C3A5; padding-top: rem(30);
          span { font-size: rem(42); color: #2A2315;}
        }
      }
    }
    &:nth-child(8) {
      border-radius: rem(0) rem(0) rem(12) rem(12);
      .vip_eight_content {
        background: url($imgPath + '/member/vip_eight_8.png') no-repeat top center;
        background-size: 100% 100%;
      }
      .vip_eight_word {
        h3 { font-size: rem(33); color: #CFB57E; padding-top: rem(20);}
        p { font-size: rem(25); color: #D3C3A5; padding-top: rem(30);
          span { font-size: rem(42); color: #2A2315;}
        }
      }
    }
  }
}
.vip_equity_more {
  text-align: center;
  p { font-size: rem(22); color: #A3A3A3; padding-bottom: rem(30);}
}
.open_vip {
  height: rem(120); text-align: center; line-height: rem(120); color: #F3E5CA; font-size: rem(36); font-weight:bold;
  background:linear-gradient(180deg,rgba(52,41,22,1) 0%,rgba(71,59,34,1) 99%);
}
